<!--
 * @Description: 第二十三章（依赖注入Provide / Inject）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-18 14:48:00
-->
<template>
  <div>
    <h1>第二十三章（依赖注入Provide / Inject）</h1>
    <div>
      <h2>子组件读取父组件（子组件可修改父组件）</h2>
      <div>
        <h3>爷爷级组件</h3>
        <div>
          <div>
            <label>
              <input type="radio" value="red" name="color1" v-model="color1Val" /> 红色
            </label>
            <label>
              <input type="radio" value="yellow" name="color1" v-model="color1Val" /> 黄色
            </label>
            <label>
              <input type="radio" value="green" name="color1" v-model="color1Val" /> 绿色
            </label>
          </div>
          <div class="box1"></div>
          <hr />
          <provideAVue></provideAVue>
        </div>
      </div>
    </div>
    <hr />
    <hr />
    <div>
      <h2>子组件读取父组件（子组件不可修改父组件）</h2>
      <div>
        <h3>爷爷级组件</h3>
        <div>
          <div>
            <label>
              <input type="radio" value="red" name="color2" v-model="color2Val" /> 红色
            </label>
            <label>
              <input type="radio" value="yellow" name="color2" v-model="color2Val" /> 黄色
            </label>
            <label>
              <input type="radio" value="green" name="color2" v-model="color2Val" /> 绿色
            </label>
          </div>
          <div class="box2"></div>
          <hr />
          <provideAVue></provideAVue>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, provide, readonly } from 'vue'
import provideAVue from '@/components/23th/provideA.vue'
const color1Val = ref<string>('red')
const color2Val = ref<string>('red')
provide('color1', color1Val)
provide('color2', readonly(color2Val))
</script>
<style scoped>
h1,
h2,
h3,
hr {
  margin: 10px 0;
}

.box1 {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: v-bind(color1Val);
}

.box2 {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: v-bind(color2Val);
}
</style>
